<?php session_start(); $user= $_SESSION['username']; ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
$(document).ready(function(){
	get_list_user_room('',1);
	query(1);		
	$("#btnSearch").click(function(){
		get_list_user_room('', 1);
	});
	$("#putDate").datepicker({dateFormat:"dd/mm/yy"});
	$('#tblUserRoom tr:nth-child(even)').addClass('alt');
	$('#tblUserRoom tr:nth-child(odd)').addClass('alt2');
	$('.alt').css('background-color','#FFFFFF');
	$('.alt2').css('background-color','#EEEEEE');
});
//Lay danh sach phong
function query(page){
	var type_room=$('#type_room').val();
	var date=$('#putDate').val();
	var start_time=$('#timeStart').val();
	var end_time=$('#timeEnd').val();
	var per_page=$('#per_page').val();
	var path='type_room='+type_room+'&date='+date+'&start_time='+start_time+'&end_time='+end_time+'&page='+page+'&per_page='+per_page;
    $.ajax({
      	type:"POST",
      	url: "data/room/room_user/book_room/total_page.php",
      	data: path,
        async: false,
    	success: function(data) {
            //alert(data);
    		$("#totalPage").html(data);
            $('#total_row').val(data);
			load_listpage(page);			
		}
	});		 
}

function load_listpage(page){
       	    var type_room=$('#type_room').val();
			var date=$('#putDate').val();
			var start_time=$('#timeStart').val();
			var end_time=$('#timeEnd').val();
			var per_page=$('#per_page').val();
			var path='type_room='+type_room+'&date='+date+'&start_time='+start_time+'&end_time='+end_time+'&page='+page+'&per_page='+per_page;
            $.ajax({
      			type:"POST",
      			url: "data/room/room_user/book_room/list_page.php",
      			data: path,
                async: true,
    			success: function(data) {
					//alert(data);
                    var total=$('#total_row').val();
					
                    if(total/per_page>1){
						//alert(data);
    				    $("#listpage_data").html(data);
                        $('#listpage').show();
                    }else {
                        $("#listpage_data").html("");
                        $('#listpage').hide();                        
                    }
                    $.ajax({
        		      	type:"POST",
        		      	url: "data/room/room_user/book_room/list_room.php",
        		      	data: path,
        		        async: true,
        		    	success: function(data) { 
        					$('#TabContentDiv').html(data);
        				}
        			});
			     }
		     }); 
    }



function open_user_room(id){
	$("#divSearchUserRoom").show();
	$("#divRoomID").hide();
	get_list_user_room(id, 1);
}

//
function get_list_user_room(id, page){
	var room_id= $("#slRoom").val();
	var uname=$("#txtName").val();
	var per_page=$('#per_page_user_room').val();	
	if(id==''){
		room_id = $("#slRoom").val();
	}else{
		room_id = id;
	}
	var path='room_id='+room_id+'&uname='+uname+'&page='+page+'&per_page='+per_page;
    $.ajax({
      	type:"POST",
      	url: "data/room/book_room/total_user_room_page.php",
      	data: path,
        async: false,
    	success: function(data) {
    		$("#total-user-room").html(data);
            $("#total-row-user-room").val(data);
            //Load phan trang
            load_listpage_user_room(page);
        	$.ajax({
        		type:"POST",
        		url: "data/room/room_user/list_user_room.php",
        		data: path,
        		async: false,
        		success: function(data) {   				
        		    $("#divContent").html(data);
        	 	}
        	}); 
		}
	});	
}

function load_listpage_user_room(page){
    var room_id= $("#slRoom").val();
	var uname=$("#txtName").val();
	var per_page=$('#per_page_user_room').val();
	var path='room_id='+room_id+'&uname='+uname+'&page='+page+'&per_page='+per_page;
	
	$.ajax({
		type:"POST",
		url: "data/room/book_room/list_user_room_page.php",
		data: path,
	    async: false,
		success: function(data) {
	        var total=$('#total-row-user-room').val();
	        if(total/per_page>1){
			    $("#listpage_data_user_room").html(data);
	            $('#listpage').show();
	        }else {
	            $("#listpage_data_user_room").html("");
	            $('#listpage').hide();	            
	        }
	     }
	 }); 
}

function book_room(room_id){
	var path='room_id='+room_id;
	$.ajax({
		type:"POST",
		url: "data/room/room_user/book_room/book_room.php",
		data: path,
	    async: false,
		success: function(data) {
			$("#divRoomID").html(data);
            $("#divSearchUserRoom").hide();
			$("#divRoomID").show();
	     }
	 }); 
}    
//Chuc nang huy dat phong
function cancel_room(id){
	if(!confirm('実キャンセルしたいですか')){
		return;
	}
	//Thuc hien huy dat phong
	var path='order_id='+id;
	$.ajax({
		type:"POST",
		url: "data/room/book_room/cancel_user_room.php",
		data: path,
	    async: false,
		success: function(data) {
			alert(data);
			get_list_user_room('', 1);	
	    }
	 });
}
</script>
</head>
<body>
<table class="ctable" width="100%">
    	<tr>
	   <!-- <td width="30%" style="padding-right:10px" align="right">???ID</td>-->
    <td width="10%"><input type="hidden" class="cinput" id="search_roomid"></td>
    <td width="10%" align=right>予約年月日
      :</td>
	<td width="10o%"><input type="text" id="putDate" name="putDate" class="cdate" style="width: 100%"></input></td>
	<td width="10%" align=right>エンド時刻</td>
	<td width="10%">
	<select id="timeStart" style="width: 80%">
	<?php 
	$hh = 0;
	for($i=0;$i<=47;$i++){
		if($i%2 == 0){
			if($hh>=0 && $hh<=9){
				echo '<option value="0'.$hh.':00">'.$hh.':00</option>';	
			}else{
				echo '<option value="'.$hh.':00">'.$hh.':00</option>';	
			}					
		}else{
		if($hh>=0 && $hh<=9){
				echo '<option value="0'.$hh.':30">'.$hh.':30</option>';	
			}else{
				echo '<option value="'.$hh.':30">'.$hh.':30</option>';	
			}
			$hh++;
		}
	}	
	?>
	</select>
	</td>
	<td width="10%" align=right>エンド時間:</td>
	<td width="10%">
	<select id="timeEnd" style="width: 80%">
	<?php 
	$hh = 0;
	for($i=0;$i<=47;$i++){
		if($i%2 == 0){
			if($hh>=0 && $hh<=9){
				echo '<option value="0'.$hh.':00">'.$hh.':00</option>';	
			}else{
				echo '<option value="'.$hh.':00">'.$hh.':00</option>';	
			}					
		}else{
		if($hh>=0 && $hh<=9){
				echo '<option value="0'.$hh.':30">'.$hh.':30</option>';	
			}else{
				echo '<option value="'.$hh.':30">'.$hh.':30</option>';	
			}
			$hh++;
		}
	}	
	?>
	</select>
	</td>
    	<td width="10%" style="padding-right:10px" align="right">教室種類</td>
        <td width="10%">
        	<select id="type_room" style="width:100%">
            	<option value='0'>全部</option>
                <option value='1'>大きい室</option>
                <option value='2'>小さい室</option>
            </select>
         </td>
        <td width="10%" align="left">
        	<input value="索引する" type="button" onClick="query(1)" style="width:80px;" class="cbutton" />
          </td>
        </tr>
    </table>
	 <div id='TabContentDiv' class="tabContent"></div>
	 <div id="phantrang">
        	<table class="ctable"  width="100%" style="height:30px;">
            <tr align="center" height="10px;">
	            <td align="left" width="20%" style="padding-top:5px">
	              総計<div id="totalPage" style="display:inline;"></div><input type="hidden" id='total_row'>
	              教室</td>
               <td style="display:inline;padding-top:5px;" width="60%"> 
                  <div id="listpage_data" style="border-style:0px;display: inline; clear:both;padding-top:5px;"></div>
              </td>
              <td width="20%"><td>
                <td align="right" width="20%" style="display:none;" id='record_view'>
                  <select id="per_page" onChange="query(1)">
                    <option value="5">5 ????</option>
                </select>
                </td>
             </tr>
         </table>   
	  
	 </div>
<div style="width: 100%;" id="divRoomID" class="cdiv"></div>
<div id="divSearchUserRoom">
<table class="ctable" id="tblSearch" width="100%">
	<tr class="title">
		<td colspan="6" align=left>会議室を予約したユーザ</td>
	</tr>
	<tr>
		
		<td align=right width="15%">ユーザID:</td>
		<td align=left width="15%"><input type="text" class="cinput"
			id="txtName" width="70%" disabled value="<?php echo $user;?>"/></td>
		<td align=right width="10%">会議室名</td>
		<td align=left width="10%"> 
				
			<?php 
				include_once 'get_list_room.php';						
			?>
				
			</td>
		<td align=left colspan="2"><input type="button" class="cbutton"
			value="索引する" name="btnSearch" id="btnSearch"></input></td>
	</tr>
</table>
<br>

<div id="paging-user-room">
<table class="ctable" width="100%">
	<tr align="center" height="10px;">
		<td align="left" width="20%">総計:
		<div id="total-user-room" style="display: inline;"></div>
		<input type="hidden" id="total-row-user-room"
			name="total-row-user-room"> レコード</td>
		<td width="40%" style="display: inline;">
		<div id="listpage_data_user_room"
			style="border-style: 0px; display: inline; clear: both;"></div>
		</td>
		<td align="right" width="40%" style="display: inline;"
			id='record_view' colspan=2>各ページのレコード数 &nbsp;<select
			id="per_page_user_room" onChange="get_list_user_room('',1)">
			<option value="10">10 レコード</option>
			<option value="20">20 レコード</option>
			<option value="50">50 レコード</option>
		</select></td>
	</tr>
</table>
</div>
<div id="inform-user-room"></div>
<div id="divContent"></div>
</div>

</body>
</html>